const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack")
const path = require("path");
// Generate pages object
const AutoInjectBundle=require("./plugins/autoInjectBundle")
const autoInjectBundle=new AutoInjectBundle()
const pagesObj = {};
const chromeName = ["popup", "options"];

chromeName.forEach(name => {
  pagesObj[name] = {
    entry: `src/${name}/index.js`,
    template: "public/index.html",
    filename: `${name}.html`
  };
});

const plugins =
  process.env.NODE_ENV === "production"
    ? [
      {
        from: path.resolve("src/manifest.production.json"),
        to: `${path.resolve("dist")}/manifest.json`,
        transform(content, absoluteFrom){
          let _content=content.toString()
          let contentJson=JSON.parse(_content)
          console.log("autoInjectBundle",autoInjectBundle.bundleList)
          let _autoInjectBundle=autoInjectBundle.bundleList.filter(item=>item.indexOf("background")==-1)
          contentJson.content_scripts[0].js=_autoInjectBundle
          contentJson.content_scripts[0].css=autoInjectBundle.bundleCssList
          _content=Buffer.from(JSON.stringify(contentJson))
          return _content
        }
      }
    ]
    : [
      {
        from: path.resolve("src/manifest.development.json"),
        to: `${path.resolve("dist")}/manifest.json`,
        transform(content, absoluteFrom){
          let _content=content.toString()
          let contentJson=JSON.parse(_content)
          console.log("autoInjectBundle",autoInjectBundle.bundleList)
          let _autoInjectBundle=autoInjectBundle.bundleList.filter(item=>item.indexOf("background")==-1)
          contentJson.content_scripts[0].js=_autoInjectBundle
          contentJson.content_scripts[0].css=autoInjectBundle.bundleCssList
          _content=Buffer.from(JSON.stringify(contentJson))
          return _content
        }
      }
    ];

module.exports = {
  // pages: pagesObj,
  css: {
    extract: {
      filename: 'css/[name].css'
      // chunkFilename: 'css/[name].css'
    }
  },
  configureWebpack: {
    entry: {
      'app': './src/content/index.js',
      "background": "./src/background.js"
    },
    output: {
      filename: 'js/[name].js'
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"
      }),
      autoInjectBundle,
      CopyWebpackPlugin(plugins)],
    optimization: {
      splitChunks: {
        // chunks: 'all', //async 只支持对异步代码进行优化，all表示对同步和异步代码同时进行优化，initial表示只对同步代码块进行优化
        chunks(chunk) {
          // exclude `my-excluded-chunk`
          return chunk.name !== 'background';
        },
        minSize: 20000,
        cacheGroups: {//缓存组，把所有的import 文件分别缓存到下面的两组中，合并输出
          node_vendors: { //匹配是否在node_modules中的库，如果是就分割文件
            test: /[\\/]node_modules[\\/]/,
            priority: -10,//分组的优先级，优先级大的分组优先
            name:"node_vendors"
          },
          default: {//默认情况下匹配default的配置
            minChunks: 2,//拆分前必须共享模块的最小块数。
            priority: -20,
            reuseExistingChunk: true//如果模块已经被打包，直接使用不打包
          }
        }
      }
    }
  }
};
